<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表演艺术</title>
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <style>
        /* 改变面包屑的分隔符 */
        .breadcrumb-item + .breadcrumb-item::before{
            content: ">";
        }
        .back-top{
            width:80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            position: fixed;
            bottom: 120px;
            right: 30px;
        }
    </style>
</head>
<body  id="grad">
    <div class="container">
        <!-- header:页眉 -->
        <header id="header">
            <div class="row">
                <!-- 布局 -->
                <div class=" container d-flex "  > 
                    <!-- 非物质文化遗产的logo（响应式） -->
                    <div class="col-2 embed-responsive ">
                        <img src="images/logo2.jpg" alt="" class="rounded-circle img-fluid" style="width: 160px; height: 160px;">
                    </div>
                    <div class="col-10 " style="height: 50px;">
                        <!-- 非物质文化遗产文字 -->
                        <h1 class="logo " id="fy-logo">非物质文化遗产</h1>
                        <div >
                            <!-- 功能栏：分类的导航链接（胶囊导航） -->
                            <ul class="nav nav-pills">
                                <!-- 非物质文化遗产的全部和分类 -->
                                <li class="nav-item"><a class="nav-link" href="second-page.html" style="color:white;font-family:'KaiTi'; font-size:20px;">查看全部</a></li>
                                <li class="nav-item"><a class="nav-link" href="byys.html" style="color:white;font-family:'KaiTi';font-size:20px;">表演艺术</a></li>
                                <li class="nav-item"><a class="nav-link" href="ctsgy.html" style="color:white;font-family:'KaiTi';font-size:20px ;">传统手工艺</a></li>
                                <li class="nav-item"><a class="nav-link" href="ktct.html" style="color:white;font-family:'KaiTi';font-size:20px ;">口头传统</a></li>
                                <li class="nav-item"><a class="nav-link" href="ysyjq.html" style="color:white;font-family:'KaiTi';font-size:20px ;">仪式与节庆</a></li>
                                <li class="nav-item"><a class="nav-link" href="zrjyyzz.html" style="color:white;font-family:'KaiTi';font-size:20px ;">自然界与宇宙中</a></li>
                            </ul>
                        </div>
                            
                    </div>     
                </div>
            </div>
        </header>
        <!-- 以下开始为二级页面的代码 -->
        <p></p>
        <!-- breadcrumb创建面包屑导航 -->
        <nav>
            <ol class="breadcrumb">
                <!-- href指向面包屑链接 -->
                <li class="breadcrumb-item"style="font-family:'KaiTi';"> <a href="index.html">首页</a></li>
                <li class="breadcrumb-item"style="font-family:'KaiTi';"> <a href="byys.html">表演艺术</a></li>
            </ol>
        </nav>
        <!-- 创建一个表格统计此界面的所有非遗物的名称 -->
       <div class="table-responsive">
           <!-- 创建一个响应式表格 -->
          <table class=" table" border="">
            <tr style="text-align: center; font-family:'KaiTi'; font-size:xx-large;color: white;">
                <td colspan="15"><b>表演艺术类</b></td>
            </tr>
            <!-- 表格第一行的总括 -->
            <tr style="font-family:'KaiTi'; font-size:x-large;color: white;">
                <!-- 分类 -->
                <td>古琴艺术</td>
                <td>藏戏</td>
                <td>侗族大歌</td>
                <td>福建木偶戏</td>
                <td>花儿</td>
                <td>京剧</td>
                <td>昆曲</td>
                <td>蒙古族呼麦歌唱艺术</td>
                <td>蒙古族长调民歌</td>
                <td>南音</td>
                <td>西安鼓乐</td>
                <td>新疆维吾尔木卡姆艺术</td>
                <td>粤剧</td>
                <td>中国朝鲜族农乐舞</td>
                <td>中国皮影戏</td>
            </tr>
          </table>
       </div>
       <p></p>
       <!-- 创建一个网格系统把类别的图片和链接排列 -->
       <div class="row">
           <!-- 每行一个图片占三格共十二格 -->
            <div class="col-md-3">
                <!--rounded-circle把按钮变成圆形 -->
                <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/guqin2.jpg');background-size: cover;"> </button>
                 <!-- 创建一个模态框 -->
                 <div class="modal fade" id="mymodal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        <!-- modal body -->
                            <div class="modal-body">
                                <!-- 模态框弹出的文字内容 -->
                                <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                        <!-- modal footer -->
                            <div class="modal-footer">
                                <!-- 模态框弹出框的按钮 -->
                                <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                           </div>
                       </div>
                   </div>
                </div>
                <p></p>
                <!-- 按钮下的文字链接跳到三级页面 -->   
                <a href="third-page\guqin.html"><p style="text-indent: 95px;font-family:'KaiTi';font-size: large;">古琴艺术</p></a>
            </div>
             <div class="col-md-3">
                <!--rounded-circle把按钮变成圆形 -->
                <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                style="width: 260px; height: 260px;background-image: url('images/zangxi.jpg');background-size: cover;"> </button>
                <div class="modal fade" id="mymodal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <!-- modal body -->
                            <div class="modal-body">
                                 <!-- 模态框弹出的文字内容 -->
                                <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                            <!-- modal footer -->
                            <div class="modal-footer">
                                  <!-- 模态框弹出框的按钮 -->
                                <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                        </div>
                    </div>
                </div>
                <p></p>
                <!-- 按钮下的文字链接跳到三级页面 -->
                <a href="index.html"><p style="text-indent: 105px;font-family:'KaiTi';font-size: large;">藏戏</p></a>
            </div>
            <div class="col-md-3">
                <!-- modal 创建一个模态框 ，rounded-circle把按钮变成圆形 -->
                <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                style="width: 260px; height: 260px;background-image: url('images/dongzu.jpg');background-size: cover;"> </button>
                <!-- modal模态框 -->
                <div class="modal fade" id="mymodal">

                    <div class="modal-dialog">
                        <div class="modal-content">
                            <!-- modal body -->
                            <div class="modal-body">
                                 <!-- 模态框弹出的文字内容 -->
                                <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                            <!-- modal footer -->
                            <div class="modal-footer">
                                 <!-- 模态框弹出框的按钮 -->
                                <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                        </div>
                    </div>
                </div>
                <p></p>
                 <!-- 按钮下的文字链接跳到三级页面 -->
                <a href="index.html"><p style="text-indent: 93px;font-family:'KaiTi';font-size: large;">侗族大歌</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/muou.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 80px;font-family:'KaiTi';font-size: large;">福建木偶戏</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/flower.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 110px;font-family:'KaiTi';font-size: large;">花儿</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/Jingopera.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 110px;font-family:'KaiTi';font-size: large;">京剧</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/kunqu2.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 110px;font-family:'KaiTi';font-size: large;">昆曲</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/humai.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 50px;font-family:'KaiTi';font-size: large;">蒙古族呼麦歌唱艺术</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/changdiao.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 70px;font-family:'KaiTi';font-size: large;">蒙古族长调民歌</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/nanyin.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 110px;font-family:'KaiTi';font-size: large;">南音</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/guyue.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 95px;font-family:'KaiTi';font-size: large;">西安鼓乐</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/mukamu.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 50px;font-family:'KaiTi';font-size: large;">新疆维吾尔木卡姆艺术</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/yueju.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 105px;font-family:'KaiTi';font-size: large;">粤剧</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/nongyuewu.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 60px;font-family:'KaiTi';font-size: large;">中国朝鲜族农乐舞</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/piying1.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 85px;font-family:'KaiTi';font-size: large;">中国皮影戏</p></a>
           </div>
       </div>   
       <div class="back-top">
        <a href="#header">
            <img src="images/top.gif" alt="" style="width: 60px; height: 80px;">
        </a>
    </div>
       <br><br><br>
       <hr>
       <footer id="footer" class="container " style="color: white; height: 60px;border-top: 1px solid #dddddd;width: 100%;background-color: rgb(179, 9, 9);">
        <div class="row p-1">
            <div class="col text-right">
                <div>
                    法律条款 隐私保护 联系我们 常见问题
                </div>
            </div>
            
        </div>
        <div class="row p-1">
            <div class="col text-center">
                <div>
                    版权所有@NIIT
                </div>
            </div>
        </div>
    </footer>

    </div>

</body>
</html>